<template>
  <div id="pressure">
    <singlebank v-on:sendbank="clickspan" :cities='cities' v-if="choosebank"></singlebank>
    <div class="homeTitle">流动性风险压力测试</div>
    <div class="pressurecon">
      <div class="current">
        <span>当前测试行社\机构：{{bankObj? bankObj.bName:'未选择行社\\机构'}}</span>
        <el-button type="primary" size="small" @click="choosebank=true">切换行社\机构</el-button>
      </div>
      <!-- 表格1 -->
      <div class="tablecon">
        <table class="table">
          <tr><td>风险因素</td><td>基准情景</td><td>轻度压力情景</td><td>中度压力情景</td><td>重度压力情景</td></tr>
          <tr v-for="(item, index) in table" :key="index">
            <td v-for="(ele, k) in item" :key='k' :class="[ele.check? 'active': '']" @click="chooseCell(item,k)">{{ele.content}}</td>
          </tr>
        </table>
        <!-- <table class="table" style="margin-top: 20px;">
          <tr>
            <td>到期期限缺口(元)</td>
            <td>近一年内活期存款最低值(元)</td>
            <td>债券折扣率(%)</td>
          </tr>
          <tr>
            <td style="background-color: transparent;"><el-input v-model="TimeLimitGap" placeholder="请输入" size="small" type="number"></el-input></td>
            <td><el-input v-model="LowestDepositValue" placeholder="请输入" size="small" type="number"></el-input></td>
            <td><el-input v-model="DiscountRate" placeholder="请输入" size="small" type="number"></el-input></td>
          </tr>
        </table> -->
      </div>
      <div class="btn">
        <el-button type="primary" size="small" @click="comput">点击进行测算</el-button>
      </div>
      <!-- 表格二 -->
      <div class="tablecon" v-if="tableData">
        <table class="table">
          <tr>
            <td>项目</td>
            <td>次日(万元)</td>
            <td>2日至7日(万元)</td>
            <td>8日至30日(万元)</td>
            <td>合计(万元)</td>
            <td>最短生存期(天)</td>
          </tr>
          <tr>
            <td style="background-color: transparent;">现金流缺口</td>
            <td style="color: white;">{{tableData.现金流缺口.次日}}</td>
            <td style="color: white;">{{tableData.现金流缺口['2日至7日']}}</td>
            <td style="color: white;">{{tableData.现金流缺口['8日至30日']}}</td>
            <td style="color: white;">{{tableData.现金流缺口.合计}}</td>
            <td style="color: white;">{{tableData.现金流缺口.最短生存期}}</td>
          </tr>
          <tr>
            <td style="background-color: transparent;">风险缓释后现金流缺口</td>
            <td style="color: white;">{{tableData.风险缓释后现金流缺口.次日}}</td>
            <td style="color: white;">{{tableData.风险缓释后现金流缺口['2日至7日']}}</td>
            <td style="color: white;">{{tableData.风险缓释后现金流缺口['8日至30日']}}</td>
            <td style="color: white;">{{tableData.风险缓释后现金流缺口.合计}}</td>
            <td style="color: white;">{{tableData.风险缓释后现金流缺口.最短生存期}}</td>
          </tr>
        </table>
      </div>     
      <!-- ---echars------- -->
      <div style="padding: 20px;">
        <div class="echars" v-if="tableData">
            <!-- <div class="bingtu">
            <div class="echarsa">
              <div id="myChart" class="circle"></div>
            </div>
          </div> -->
          <!-- 折线图 -->
          <div class="zhexian">
            <div class="echarsa">
              <div id="myChart1" class="tiaozi"></div>
            </div>
          </div>
        </div>
      </div>
    </div>  
  </div>
</template>

<script>
import singlebank from './singleBank';
export default {
  name: 'pressure',
  components: {
    singlebank
  },
  data () {
    return {
      cities: [],
      bankObj: {
        bId: '',
        bName: ''
      },
      choosebank: false,
      table: [
          [
            {content: '负债方 - 存款（含活期存款及定期存款）流失率', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '3%', check: false, value: 'light'},
            {content: '5%', check: false, value: 'medium'},
            {content: '10%', check: false, value: 'heavy'},
          ],
          [
            {content: '负债方 - 同业负债规模下降（同业存放、同业拆放、卖出回购）', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '10%', check: false, value: 'light'},
            {content: '20%', check: false, value: 'medium'},
            {content: '30%', check: false, value: 'heavy'},
          ],
          [
            {content: '资产方 - 30日内到期贷款未按期偿还比率', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '4%', check: false, value: 'light'},
            {content: '7%', check: false, value: 'medium'},
            {content: '10%', check: false, value: 'heavy'},
          ],
          [
            {content: '资产方 - 同业业务交易对手违约，资金无法收回（存放同业、拆放同业、买入返售、除优质流动性资产外的同业投资）', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '3%', check: false, value: 'light'},
            {content: '5%', check: false, value: 'medium'},
            {content: '10%', check: false, value: 'heavy'},
          ],
          [
            {content: '资产方 - 优质流动性资产（国债、政策性金融债）价格下跌或融资折扣率上升', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '5%', check: false, value: 'light'},
            {content: '10%', check: false, value: 'medium'},
            {content: '15%', check: false, value: 'heavy'},
          ],
          [
            {content: '资产方 - 对发起设立村镇银行提供流动性支持（占村镇银行各项存款比例）', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '5%', check: false, value: 'light'},
            {content: '10%', check: false, value: 'medium'},
            {content: '15%', check: false, value: 'heavy'},
          ],
          [
            {content: '表外项目 - 30日内到期的银行承兑汇票垫款比率', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '4%', check: false, value: 'light'},
            {content: '7%', check: false, value: 'medium'},
            {content: '10%', check: false, value: 'heavy'},
          ],
          [
            {content: '表外项目 - 发行非保本代客理财产品投资标的违约', check: false}, 
            {content: '基准情景', check: false, value: 'standard'},
            {content: '3%', check: false, value: 'light'},
            {content: '5%', check: false, value: 'medium'},
            {content: '10%', check: false, value: 'heavy'},
          ],
      ],
      TimeLimitGap: '',
      LowestDepositValue: '',
      DiscountRate: '',
      tableData: '',
      tempArr: [],
      tiaoDataX: [],
      tiaoDataValue: [],
      currentPage: 0
    };
  },
  mounted() {
    this.getCity();
    // --------测试-------------
    this.getHang()
  },
  methods: {
    getHang() {
      this.axios.get('organizationalChart/getUserBank').then(res => {
          let data = res.data.data
          if(data != '') {
            this.bankObj.bId = data.bankId
           this.bankObj.bName = data.bankName
          }
          
      })
    },
    // 向子组件传递数据
    getCity() {
      this.axios.get('organizationalChart/findBank')
        .then(({data}) => {
          if (data.code == 200) {
            this.cities = data.data;
          }
        })
    },
    clickspan(data) {
      console.log(data)
      this.bankObj = data;
      this.choosebank = false;
    },
  //  ------------------
  comput () {
    if (!this.bankObj) {
       this.$message({message: '您还未选择行社',type: 'warning'});
       return false;
    }
    let status = 0;
    this.table.forEach((item, index) => {
      item.forEach((ele, k) => {
        if (ele.check) {
          status = status +1
        }
      })
    })
    if (status != this.table.length) {
       this.$message({message: '请您选择完整表格',type: 'warning'});
       return false;
    }
    let tempArr = [];
    this.table.forEach ((item, index) => {
      let temp = item.find((ele, k) => {
        return ele.check == true
      })
      tempArr.push(temp);
    })
    let obj= {
      riskRateOne: tempArr[0].value,
      riskRateTwo: tempArr[1].value,
      riskRateThree: tempArr[2].value,
      riskRateFour: tempArr[3].value,
      riskRateFive: tempArr[4].value,
      riskRateSix: tempArr[5].value,
      riskRateSeven: tempArr[6].value,
      riskRateEight: tempArr[7].value,
      // TimeLimitGap: this.TimeLimitGap,
      // LowestDepositValue: this.LowestDepositValue,
      // DiscountRate: this.DiscountRate,
      bankId: this.bankObj.bId
    }
    this.axios.post('pressure/getResult',obj)
      .then(({data})=> {
        this.tableData = data.data;
        let obj = this.tableData.风险缓释后现金流缺口占比;
        let tempArr = []; //饼形图数据
        let tiaoDataX = [];
        let tiaoDataValue = [];
        for(let k in obj) {
          // tempArr.push({name: k, value: obj[k]-0})
          tiaoDataX.push(k);
          tiaoDataValue.push(obj[k]-0);
        }
        this.tempArr = tempArr;
        this.tiaoDataX = tiaoDataX;
        this.tiaoDataValue = tiaoDataValue;
        this.$nextTick(()=>{
          // this.drawLine(); // 初始化echars
          this.drawLine1(); // 初始化echars
        })
      })
  }, 
    chooseCell(item, k) {
      if(k==0) {
        return false;
      }
      item.forEach(element => {
        element.check = false;
      });
      item[k].check = true;
    },
    // drawLine() {
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(document.getElementById("myChart"));
    //   // 绘制图表
    //   myChart.setOption({
    //     calculable: true,
    //     tooltip : {
    //       trigger: 'item',
    //       formatter: (data)=> {return data.data.name+'：'+data.data.value+'%'}
    //     },
    //     series: [
    //       {
    //         name: "风险缓释后现金流缺口占比",
    //         type: "pie",
    //         radius: "50%",
    //         center: ["50%", "50%"],
    //         data: this.tempArr
    //       }
    //     ]
    //   });
    // },
    drawLine1() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      // 绘制图表
      myChart.setOption({
        tooltip : {
          trigger: 'item',
          formatter: (data)=> {
            console.log(data);
            return data.name+'：'+data.value+'%'
          }
        },
        xAxis: {
            type: 'category',
            data: this.tiaoDataX,
            axisLabel: {  
              interval:0,  
              rotate:0,
              // show: false
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: this.tiaoDataValue,
            type: 'bar',
            label: {
                        show: true,
                        position: 'top',
                        formatter: '{b}\n{c}'
                    },
        }]
      });
    },
  }
};
</script>

<style lang="scss">
  #pressure {
    // position: relative;
    .pressurecon {
      // background-color: white;
      padding-bottom: 20px;
      .current {
        padding: 20px;
        display: flex;
        justify-content: space-between;
      }
    }
    .tablecon {
      padding: 20px;
      >.table {
        width: 100%;
        border: 1px solid #cccccc;
        border-collapse:collapse;
        tr {
          text-align: center;
          &:first-child {
            background-color: rgba(53, 58, 58, 0.85);
            color:white;
          }
          td {
            border-right: 1px solid #cccccc;
            border-bottom: 1px solid #cccccc;
            padding: 10px 10px;
            &:first-child {
              background-color: rgba(53, 58, 58, 0.55);
              width: 470px;
              color:white;
              
            }
            &.active {
              background-color: #FF9966;
            }
          }
        }
      }
    }
    .btn {
      margin-top: 20px;
      text-align: center;
    }
    .echars {
      background-color: rgba(255, 255, 255, .9);
        .bingtu {
          height: 400px;
          .circle {
            width: 100%;
            height: 400px;
          }
      }
      .zhexian {
        .tiaozi {
          width: 100%;
          height: 400px;
        }
      }
    }
    
  }
</style>
